<template>
	<view>
		<scroll-view scroll-y="true" class="clock-in-list">
			<view class="clock-in-item yf-flex" v-for="(item,index) in list" :key="index">
				<view class="clock-in-text">
					外出
				</view>
				<view class="clock-in-line yf-flex-vertical">
					<view class="line"  :style="{borderColor:index==0?'#fff':'',height: '8rpx'}"></view>
					<view class="circle"></view>
					<view class="line" :style="{borderColor:index==(list.length-1)?'#fff':'',height: index==(list.length-1)?'0':''}"></view>
				</view>
				<view class="clock-in-content">
					<view class="content-time">
						{{item.simpleDate}}
					</view>
					<view class="content-addr">
						{{item.address}}
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default: function() {
					return []
				}
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	.clock-in-list {
		height: 48vh;
		padding-top: 80rpx;
		.clock-in-item {
			width: 100%;
			.clock-in-text {
				width: 100rpx;

			}

			.clock-in-line {
				align-items: center;
				justify-content: center; 
				.circle {
					width: 20rpx;
					height: 20rpx;
					border-radius: 50%;
					border: 1rpx solid #3291F8;
				}

				.line {
					border: 1rpx solid rgba(187, 187, 187, 1);
					height: 192rpx;
					background: rgba(187, 187, 187, 1);
				} 
			}

			.clock-in-content {
				padding-left: 33rpx;
				flex: 1;

				.content-time {
					font-size: 12+28rpx;
					font-weight: bold;
					color: #000;
				}

				.content-addr {
					color: #828282;
					font-size: 12+24rpx;
					margin-top: 22rpx;
				}
			}
		}
	} 
</style>
